<template>
  <div style="background-color:#fff;padding:20px">
    <a-row>
      <a-col :span="12">
        <div style="display:flex;flex-direction:row">
          <a-button type="primary" @click="addMember()" style="margin-bottom:10px">添加用户</a-button>

          <a-upload
            name="file"
            :multiple="true"
            :action="uploadFile.url"
            :headers="headers"
            :beforeUpload="beforeUpload()"
            @change="handleChangeupload"
          >
            <a-button type="primary" style="margin-left:10px">批量导入</a-button>
          </a-upload>

          <a href="http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/账户模板.xlsx">
            <a-button type="primary" style="margin-left:10px">模板下载</a-button>
          </a>
        </div>
      </a-col>
      <a-col :span="12" style="text-align:right">
        <a-input v-model="searchData" style="width:150px" placeholder="请输入手机或者姓名"></a-input>
        <a-button type="primary" style="margin-left:10px" @click="searchMember()">查询</a-button>
      </a-col>
    </a-row>

    <a-table
      bordered
      :loading="tableLoading"
      rowKey="id"
      @change="pageShow"
      :pagination="pagination"
      :columns="columns"
      :dataSource="dataSource"
      size="middle"
    >
      <template slot="operation" slot-scope="text, record">
        <a @click="modifyMember(record)">编辑</a>
         <a-divider type="vertical" />
        <a @click="deleteMember(record)">删除</a>
      </template>
      <template slot="roleName" slot-scope="text, record">
        <a @click="seeAuthority(text)">{{ text }}</a>
      </template>
      <template slot="emile" slot-scope="text, record">
        <span>{{ record.account }}</span>
      </template>
    </a-table>

    <!-- //添加账户 -->
    <AddIndex
      v-bind:clickType="clickType"
      v-bind:newform="newform"
      v-if="addShow"
      @cancelEvent="cancelEvent"
      @successEvent="successEvent"
    ></AddIndex>
    <!-- 用户权限 -->
    <Authority v-if="authorityShow" @cancelEvent="cancelEvent" v-bind:roleType="roleType"></Authority>
  </div>
</template>

<script>
import Vue from 'vue'
import AddIndex from '@/views/accountManage/addIndex'
import Authority from '@/views/accountManage/authority'
import { getMemberList, deleteMemberInfo } from '@/api/public'
export default {
  components: { AddIndex, Authority },
  data() {
    return {
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      clickType: 1, //1添加2编辑
      newform: {},
      current: 1,
      pageSize: 10,
      searchData: '',
      loading: false,
      columns,
      dataSource: [],
      addShow: false,
      authorityShow: false,
      tableLoading: false,
      roleType: '',
      uploadFile: {
        id: 1,
        name: '',
        url: '/api/import/manage/member',
        file: '',
        status: '未上传',
        desc: ''
      },
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN')
      }
    }
  },
  created() {},
  mounted() {
    this.getUrgeDataInfo()
  },
  methods: {
    //自定义上传前
    beforeUpload(record) {
      this.headers.authorization = Vue.ls.get('ACCESS_TOKEN')
    },
    //数据导入
    handleChangeupload(info) {
      let fileList = [...info.fileList]
      if (info.file.status === 'uploading') {
      }
      if (info.file.status === 'done') {
        if (info.file.response.code == 200) {
          this.$message.success(`${info.file.name}文件,上传成功`)
          this.getUrgeDataInfo()
        } else {
          this.$message.success(`${info.file.name}文件,上传失败:${info.file.response.msg}`)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name}文件,上传失败.`)
      } else if (info.file.status === 'removed') {
      }
    },
    //获取催办表格数据
    getUrgeDataInfo() {
      this.tableLoading = true
      getMemberList(this.current, this.pageSize, this.searchData)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataSource = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      getMemberList(pagination.current, pagination.pageSize, this.searchData)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataSource = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    handleTableChange() {},
    cancelEvent() {
      this.addShow = false
      this.authorityShow = false
    },
    importMember() {},
    successEvent() {
      this.getUrgeDataInfo()
      this.authorityShow = false
      this.addShow = false
    },
    clearForm() {
      //  if(this.clickType==1){
      //    Object.keys(this.newform).forEach((key) => (this.newform[key] = ''))
      //  }
    },
    searchMember() {
      this.current = 1
      this.getUrgeDataInfo()
    },
    addMember() {
      this.clickType = 1
      this.addShow = true
    },
    deleteMember(e) {
      this.$confirm({
        title: '提示',
        content: '确定要删除吗?',
        onOk: () => {
          deleteMemberInfo(e.id).then(response => {
            if (response != undefined) {
              if (response.code == 200) {
                this.current=1
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '删除成功!',
                  duration: 3
                })
                this.getUrgeDataInfo()
              }
            }
          })
        },
        onCancel() {}
      })
    },
    modifyMember(e) {
      //如果是超级管理员，禁止编辑
      if (e.roleName == '超级管理员') {
        let type = 'error'
        this.$notification[type]({
          message: '温馨提示',
          description: '超级管理员不能编辑!',
          duration: 3
        })
      } else {
        let form = e
        this.newform = JSON.parse(JSON.stringify(form))
        this.clickType = 2
        this.addShow = true
      }
    },
    seeAuthority(e) {
      this.roleType = e
      this.authorityShow = true
    }
  }
}

const columns = [
  // {
  //   title: '员工编号',
  //   dataIndex: 'staffNo',
  //   width: '9.75%',
  //   align: 'center',
  //   scopedSlots: { customRender: 'staffNo' },
  //   ellipsis: true,
  // },
  {
    title: '姓名',
    dataIndex: 'name',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'name' }
  },

  {
    title: '岗位名称',
    dataIndex: 'deptName',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'deptName' }
  },
  {
    title: '登陆账号',
    dataIndex: 'account',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'account' }
  },
  {
    title: '归属', //省市级
    dataIndex: 'belong',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'belong' }
  },
  {
    title: '人员类型', //
    dataIndex: 'type',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'roleName' }
  },
  {
    title: '联系电话',
    dataIndex: 'mobile',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'mobile' }
  },
  // {
  //   title: '邮箱',
  //   dataIndex: 'emile',
  //   width: '9.75%',
  //   align: 'center',
  //   ellipsis: true,
  //   scopedSlots: { customRender: 'emile' },
  // },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '5%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'operation' }
  }
]
</script>

<style scoped></style>
